import React from "react"
import { List } from "./list"
import { SearchPanel } from "./search-panel"
import { useEffect, useState } from "react"
import * as qs from 'qs'
import { cleanObject, useDebounce, useMount } from "../../untils"


const baseUrl = 'http://localhost:3001'
export const ProjectListScreen = () => {
  const [users, setUsers] = useState([])
  const [param, setParam] = useState({
    name:'',
    personId:''
  })
  const debounceParam = useDebounce(param, 200)
  const [list, setList] = useState([])
  useEffect(() => {
    fetch(`${baseUrl}/projects?${qs.stringify(cleanObject(debounceParam))}`).then(async response => {
      if(response.ok){
        setList(await response.json())
      }
    })
  }, [debounceParam])
  useMount(() => {
    fetch(`${baseUrl}/users`).then(async response => {
      if(response.ok){
        setUsers(await response.json())
      }
    })
  })
  return <div>
    <SearchPanel param={param} setParam= {setParam} users={users}/>
    <List list={list} users={users}/>
  </div>
}